<template>
  <div class="item" @click="clickHandle">
    <div class="imgWrap flex_c_c">
      <img v-lazy="data.img_url" alt>
    </div>
    <div class="title ellipsis_l1">{{ data.title }}</div>
    <slot name="footer">
      <div class="price">
        <span>&yen; {{ data.sell_price }}</span>
        <span> {{ data.buy }} 购买</span>
      </div>
    </slot>
  </div>
</template>

<script>

export default {
  props: {
    data: {
      // 参数类型校验和必传
      type: Object,
      required: true
    }
  },
  methods: {
    clickHandle(event) {
      // 触发父的自定义事件
      this.$emit('click', this.data, event)
    }

  }
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 45%;
  padding: 6px;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 4px;
  font-size: 14px;

  .imgWrap {
    height: 100px;
    overflow: hidden;
    width: 100%;

    img {
      height: 100%;
    }
  }

  .title {
    margin-top: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .price {
    display: flex;
    justify-content: space-between;
    align-items: center;

    span:nth-child(1) {
      color: #ff4142;
      font-size: 16px;
      font-weight: 700;
    }

    span:nth-child(2) {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
